<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--fonts-->
    <link href='http://fonts.googleapis.com/css?family=Philosopher:400,400italic|Comfortaa&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <!--vendor css-->
<!--    <link rel="stylesheet" href="./css/">-->
    <!--app css -->
    <link rel="stylesheet" href="./css/main.css">
</head>
<body>
    <div id="wrapper">
        <header id="header" class="cf">
            <div id="menu-buttons-left">
                <a href="" id="home-button"></a>
                <a href="" id="menu-button">Menu</a>
            </div>
            <nav id="left-nav">
                <ul class="cf">
                    <li><a href="">продукти</a></li>
                    <li><a href="">къде да купим</a></li>
                </ul>
            </nav>
            <div id="logo">
                <a href="">
                    <img src="./image/logo.png" alt="">
                </a>
            </div>
            <nav id="right-nav">
                <ul class="cf">
                    <li><a href="">за нас</a></li>
                    <li><a href="">как да...</a></li>
                </ul>
            </nav>
            <div id="menu-buttons-right" class="cf">
                <div id="search-button">
                    <a></a>
                </div>
                <div id="lang-button">
                    <div>
                        <span class="lang-active">bg</span>
                        <span id="lang-select">
                            <a href="">en</a>
                        </span>
                    </div>
                </div>
            </div>
        </header> <!--#header -->
        <div id="search-slide" class="cf">
            <div id="search-close-button"><span></span></div>
            <div id="search-input-container">
                <input type="text" id="search-field" placeholder="търсене">
            </div>
            <ul id="search-results" class="cf">

            </ul>
        </div> <!--#search-slide-->
        <div id="about-front" class="about-front">
            <div id="white-header"></div>
            <h1>българската марка очила</h1>
            <p>KWIAT е единствената марка очила, чиито модели се проектират в България. 
Основана през 1991г. от г-н Михаил Цветков, нашата семейна компания не спира да се развива и да печели награди.
Признати сме у нас и в чужбина защото държим на качеството и използваме материали единствено
от доказани европейски производители.</p>
        </div>
        <div class="bg-gradient">
        <div id="inner-wrapper">   
            <section id="about-content-container" class="cf">
                <article class="cf">
                    <header>
                        <h3>Препоръки</h3>
                    </header>
                    <ul id="recom-list" class="cf">
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>
                        <li class="recom-item">
                            <a href="" class="recom"><img src="./image/recom-person.png" alt=""></a>
                            <div class="recom-popup">
                                <div class="popup-container cf">
                                    <div class="popup-close"></div>
                                    <img src="./image/recom-person.png" alt="">
                                    <p>“Нося KWIAT откакто се помня и постоянно ги препоръчвам на свои
    приятели. Благодаря ви, че ви познавам и ви пожелавам успех!”<a href="" class="recom-name">Глория</a></p>
                               </div>
                            </div>
                        </li>

                    </ul>
                </article>
                <article id="talents" class="cf">
                    <header>
                        <h3>Търсим таланти</h3>
                    </header>
                    <img src="./image/talent.jpg" alt="">
                    <div class="text-container">
                        <p>Талантливи млади хора са винаги добре дошли при нас.
    Изпратете ни автобиография на jobs@kwiat.bg
    Ще се радваме да се запознаем.</p>
                   </div>
                </article>
                <article id="abonament" class="cf">
                    <header>
                        <h3>Абонамент</h3>
                    </header>
                    <p>Абонирайте се за нашия бюлетин ако искате да получавате
актуални вести около нашата компания, игрите които организираме
и модните тенденции в оптиката.</p>
                    <div id="subscribe-input-container">
                        <input type="text" id="subscribe-field" placeholder="въведете e-mail адрес">
                    </div>
                </article>
            </section> <!--#home-content-container-->
        </div> <!--#inner-wrapper-->
    </div>
    <div id="footer-container">
        <footer class="cf">
            <div id="footer-left">
                <div class="footer-top">
                    <p>&copy; 2014 <span id="brand-copy">KWIAT</span> Всички права запазени. <br> <a href="">Общи условия и поверителност.</a></p>
                </div>
                <div class="footer-bottom cf" id="login-button-container">
                    <a href="" id="footer-login"></a>
                    <p>Вход за <br> партньори</p>
                </div>
            </div> 
            <div id="footer-center">
                <img src="./image/footer-flower.png" alt="">
            </div>
            <div id="footer-right">
                <div class="footer-top">
                    <a href="" id="win">Спечели с Квият <span id="label-new">ново</span></a>
                    <a href="">Контакти</a>
                </div>
                <div class="footer-bottom" id="social-icons">
                    <ul  class="cf">
        <!--                            <li><a href="./image/footer-twitter.png" id="twitter-icon"></a></li>-->
                        <li><a href="./image/footer-p.png" id="some-icon"></a></li>
                        <li><a href="./image/footer-facebook.png" id="fb-icon"></a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>
</div> <!--# wrapper-->
    
    <!--vendor js-->
<!--    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
    <script src="lib/jquery-1.11.1.min.js"></script>
    <script src="./lib/parallax.min.js"></script>    
    <script src="./lib/masonry.pkgd.min.js"></script>
    <!--app js-->
    <script src="./js/main.js"></script>
</body>
</html>